﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Graph.ascx.cs" Inherits="PerformanceMonitor.Graph" %>
<script type="text/javascript">
    $(document).ready(function() {
	    var chart = new Highcharts.Chart({
		    chart: {
			    renderTo: '<%=container.ClientID%>',
			    zoomType: 'x'
		    },
	            title: {
			    text: '<%=Title%>'
		    },
	            subtitle: {
			    text: '<%=SubTitle%>'
		    },
		    xAxis: {
			    type: 'datetime',
			    maxZoom: 10 * 60 * 1000, // ten minutes
			    title: { text: null	}
		    },
		    yAxis: { title: { text: '<%=YAxisName%>'	},
			    min: 0,
			    startOnTick: false,
			    showFirstLabel: false
		    },
		    tooltip: {
			    formatter: function() {
				    return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
					    Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>'+
					    'Value:'+ Highcharts.numberFormat(this.y, 5) +'';
			    }
		    },
		    legend: {
			    
		    },
		    plotOptions: {
			    spline: {
				    marker: {
					    radius: 0,
					    lineColor: '#666666',
					    lineWidth: 1
				    }
			    }
		    },
	        <%= LinesRendered %>
	    });
    	
    	
    });
</script>

<div runat="server" id="container" style="width: 800px; height: 600px; margin: 0 auto"></div>